<template>
    <div class="all">
        <div class="search">
            <van-search ref="searchRef" v-model="keyWord" show-action placeholder="请输入搜索关键词" @cancel="$router.back()" />
        </div>

        <div class="container">
            <van-tabs v-if="keyWord">
                <van-tab title="综合" name="sell">
                    <TabList ref="tab1Ref" :request="(onRequest as any)" />
                </van-tab>

                <van-tab title="销量" name="syn">
                    <TabList ref="tab2Ref" :request="(onRequest1 as any)" />
                </van-tab>

                <van-tab title="新品" name="new">
                    <TabList ref="tab3Ref" :request="(onRequest2 as any)" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script lang="ts" setup>
import TabList, { type IParams } from '@/components/tab.vue'
import { getSearchNewGoodsList, getSearchSellGoodsList, getSearchSynGoodsList } from '@/api'
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { debounce } from 'lodash'

const route = useRoute()
const kk = route.query.item

const keyWord = ref(kk || '') as unknown as any

const searchRef = ref()


const tab1Ref = ref<InstanceType<typeof TabList> | null>(null)
const tab2Ref = ref<InstanceType<typeof TabList> | null>(null)
const tab3Ref = ref<InstanceType<typeof TabList> | null>(null)

watch(
    debounce(() => (keyWord as any).value,500),
    () => {
        // 让右侧组件，触发接口调用
        tab1Ref.value?.onRefresh()
        tab2Ref.value?.onRefresh()
        tab3Ref.value?.onRefresh()
    }
)

// 自动获取焦点
onMounted(() => {
    searchRef.value.focus();
})

const onRequest = async (params: IParams) => {
    // console.log(params);
    const sellGoods = await getSearchSellGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });
    const { data, totalCount }: any = sellGoods
    return {
        list: data,
        total: totalCount
    }
}

const onRequest1 = async (params: IParams) => {
    const synGoods = await getSearchSynGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });

    const { data, totalCount }: any = synGoods

    return {
        list: data,
        total: totalCount
    }
}

const onRequest2 = async (params: IParams) => {
    const newGoods = await getSearchNewGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });
    const { data, totalCount }: any = newGoods

    return {
        list: data,
        total: totalCount
    }
}

</script>

<style lang="scss" scoped>
.all {
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.search {
    display: flex;
    // height: 100%;
    height: 54px;
    padding-top: -54px;

    // box-sizing: border-box;
    .van-search {
        width: 100%;
    }
}

.van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

:deep(.van-tabs__nav) {
    height: 100%;
}

:deep(.van-tabs__content) {
    flex: 1;
    overflow-y: auto;
}
</style>